<!--
 * @Author: your name
 * @Date: 2021-03-30 21:12:05
 * @LastEditTime: 2021-04-12 15:38:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\Bargain\components\Conduct.vue
-->
<template>
  <div class="conduct">
    <div class="title">
      <img :src="underway" alt v-if="data.already" />
      <img :src="accomplish" alt v-if="!data.already" />
    </div>
    <div class="container">
      <dl v-if="data.already">
        <dt>
          <img :src="data.groupImgUrl" alt style="width: 100%; height: 100%;" />
        </dt>
        <dd>
          <p style="font-size: 12px;">
            已有
            <b>{{data.grouprecordsNum}}</b>人拼团，仅差
            <b>{{data.already}}</b>人
          </p>
          <p
            style="width: 100%; background: -webkit-linear-gradient(#f9490a, #fd9101); height: 15px; border-radius: 10px;"
          ></p>
          <p style="display: flex; align-items: center;">
            <van-count-down :time="data.time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
            <span style="font-size: 14px; margin: 0 10px; color: #7d6733; font-weight: 600;">后结束</span>
          </p>
          <p
            style="width: 100%; height: 30px; background: -webkit-linear-gradient(#f9490a, #fd9101);; font-size: 14px; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center;"
            @click="handlePushInvitation"
          >查看详情</p>
        </dd>
      </dl>
      <dl v-if="!data.already" @click="handleOver">
        <dt>
          <img :src="data.groupImgUrl" alt style="width: 100%; height: 100%;" />
        </dt>
        <dd style="font-size: 12px;">
          <p style="font-size: 16px; color: red;">恭喜你！</p>
          <p>拼团成功，宝贝正在打包发货中</p>
          <p>请注意查收</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import underway from "../../../assets/img/underway.jpg"; //进行中
import accomplish from "../../../assets/img/accomplish.jpg"; //已完成
import { mapState } from "vuex";
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapState("group", ["shopId"]),
  },
  data() {
    return {
      underway: underway,
      accomplish: accomplish,
    };
  },
  methods: {
    //跳转分享页面
    handlePushInvitation() {
      const shopId = localStorage.getItem("shopId");
      this.$router.push({ path: "/groupStatus", query: { id: shopId } });
    },
    //弹出完成弹框
    handleOver() {
      this.$emit("handleOver");
    },
  },
};
</script>

<style lang="scss" scoped>
.conduct {
  width: 100%;
  height: 200px;
  background: #fff;
  border-radius: 20px 20px 20px 0;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .title {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #febf12;
    border-radius: 20px 20px 0 0;
    display: flex;
  }
  img {
    width: 200px;
    height: 26px;
  }
  .container {
    flex: 1;
    overflow: hidden;
    dl {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      dt {
        width: 120px;
        height: 120px;
      }
      dd {
        flex: 1;
        margin: 0 10px;
        p {
          margin: 10px 0;
          b {
            color: #c03848;
          }
        }
      }
    }
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #935705;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #e7d9af;
    font-size: 12px;
    text-align: center;
    background-color: #935705;
  }
}
</style>